<template>
  <div class="contents">
    <PanelTitle title="访问量分析" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import { useVisitStore } from "@/stores/visit";
const visitStore = useVisitStore()
let curChose = ref(0);

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/farming/user/visit/statist/list",
    method: "get",
  });

  let dict = visitStore.visitType

  let legendData = res.data.map((item) => {
    return dict[item.sysType];
  });

  let seriesData = res.data.map((item) => {
    let datas = [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    ];

    item.userVisitTimePointStatistList.map((item) => {
      datas[item.timePoint] = item.num;
    });

    return {
      name: dict[item.sysType],
      type: "line",
      symbol: "none",
      smooth: true,
      lineStyle: {
        normal: {
          // color: "#74FFFD",
          width: fitChartSize(2),
        },
      },
      data: datas,
    };
  });
  // let seriesData = [
  //     {
  //       name: "种植主体",
  //       type: "line",
  //       symbol: "none",
  //       lineStyle: {
  //         normal: {
  //           color: "#74FFFD",
  //           width: fitChartSize(2),
  //         },
  //       },
  //       data: [80, 70, 55, 60, 50],
  //       areaStyle: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //           {
  //             offset: 0,
  //             color: "rgba(28,101,143,1)",
  //           },
  //           {
  //             offset: 0.6,
  //             color: "rgba(28,101,143,0)",
  //           },
  //         ]),
  //       },
  //     },
  //     {
  //       name: "柘参2号",
  //       type: "line",
  //       symbol: "none",
  //       lineStyle: {
  //         normal: {
  //           color: "#72BCFF",
  //           width: fitChartSize(2),
  //         },
  //       },
  //       data: [110, 80, 40, 90, 66],
  //       areaStyle: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //           {
  //             offset: 0,
  //             color: "rgba(28,75,130,1)",
  //           },
  //           {
  //             offset: 0.6,
  //             color: "rgba(28,75,130,0)",
  //           },
  //         ]),
  //       },
  //     },
  //     {
  //       name: "柘参3号",
  //       type: "line",
  //       symbol: "none",
  //       lineStyle: {
  //         normal: {
  //           color: "#FF9745",
  //         },
  //       },
  //       data: [90, 120, 80, 70, 60],
  //       areaStyle: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //           {
  //             offset: 0,
  //             color: "rgba(86,101,96,1)",
  //           },
  //           {
  //             offset: 0.6,
  //             color: "rgba(86,101,96,0)",
  //           },
  //         ]),
  //       },
  //     },
  //     {
  //       name: "其他",
  //       type: "line",
  //       symbol: "none",
  //       lineStyle: {
  //         normal: {
  //           color: "#FBFC01",
  //         },
  //       },
  //       data: [80, 120, 100, 60, 90],
  //       areaStyle: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //           {
  //             offset: 0,
  //             color: "rgba(58,85,141,1)",
  //           },
  //           {
  //             offset: 0.6,
  //             color: "rgba(58,85,141,0)",
  //           },
  //         ]),
  //       },
  //     },
  //   ]

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      icon: "circle",
      itemWidth: fitChartSize(7),
      itemHeight: fitChartSize(7),
      bottom: fitChartSize(4),
      data: legendData,
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: fitChartSize(9),
      },
    },
    color: ["#74FFFD", "#72BCFF", "#FF9745", "#FBFC01"],
    grid: {
      left: "3%",
      right: "7%",
      bottom: "18%",
      top: "14%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "0:00",
        "1:00",
        "2:00",
        "3:00",
        "4:00",
        "5:00",
        "6:00",
        "7:00",
        "8:00",
        "9:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00",
      ],
      axisLabel: {
        interval: 0,
        rotate: -45,
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：人",
      nameTextStyle: {
        color: "#fff",
        fontSize: fitChartSize(9),
        padding: [0, fitChartSize(-600), 0, 0],
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.09)", //线条颜色
        },
      },
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(10),
          // rotate: 38
        },
      },
    },
    series: seriesData,
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}
</style>